<template>
  <el-dialog v-model:model-value="show" title="编辑" :destroy-on-close="true">
    <el-form :form="form" :rules="rules">
      <el-form-item label="分类名称" prop="categoryName" >
        <el-input v-model="form.categoryName" maxlength="15" show-word-limit/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {saveOrUpdateCategory} from "@/api/product";
import {ElMessage} from "element-plus";

const props = defineProps({
  show: Boolean,
  row: Object,
})

const emits = defineEmits(['update:show', 'confirmed'])

const rules = reactive({
  categoryName: {
    required: true,
    message: '请输入分类名称',
    trigger: 'blur'
  }
})

const show = computed({
  get() {
    return props.show
  },

  set(val) {
    return emits('update:show', val)
  }
})

const form = reactive({
  categoryName: '',
})

const handleCancel = () => {
  show.value = false
}

const handleConfirm = async () => {
  show.value = false
  const rs: any = await saveOrUpdateCategory({...props.row, ...form})

  if (rs.code === 200) {
    ElMessage.success('修改成功')
    emits('confirmed')
  }
}

onUpdated(() => {
  form.categoryName = props?.row?.categoryName ?? '123'
})

</script>

<style scoped>

</style>
